<template>
  <div class="judge">
    <h3 class="judgeh3">1530条真实用户评论</h3>
    <p class="xiejudge">
      <button @click="judegbtn"><i class="el-icon-plus"></i>写评论</button>
    </p>

<!-- 自己发表的评论 -->
      <div>
          <el-row v-for="(items,index) in mycomm" :key="index">
      <el-col :span="2">
        <img class="avatar" :src="items.avatar" alt=""  />
        </el-col>
      <el-col :span="2" class="uname">{{items.uname}}
        <p class="my-lv">Lv.10</p>
        <br>
      </el-col>
      <el-col :span="20">
        <p class="connect">{{items.centent}}</p>
        <img :src="items.image" class="comm-pic" alt="">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="回复评论:"
          v-model="judgetxt"
        >
        </el-input>
        <p class="xiejudge"><button @click="huifu">回复</button></p>
      </el-col>
    </el-row>
      </div>




    <el-row v-for="item in judge" :key="item.id">
      <el-col :span="2"
        ><img class="avatar" :src="item.avatar" alt=""
      /></el-col>
      <el-col :span="2" class="uname">{{ item.uname }} 
        <br>
        <p>{{item.num}}</p>
      </el-col>
      <el-col :span="20">
        <p class="connect">{{ item.connect }}</p>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="回复评论:"
          v-model="judgetxt"
        >
        </el-input>
        <p class="xiejudge"><button @click="huifu">回复</button></p>
        <p class="timer">
          评价时间：<b>{{ item.timer }}</b>
        </p>
      </el-col>
    </el-row>
    <!-- 评论信息 -->
    <div class="imgmb" id="judgemas">
      <massagetem></massagetem>
      <i class="el-icon-error" @click="cloce"></i>
    </div>
  </div>
</template>

<script>
import massagetem from './massage.vue'
export default {
  data() {
    return {
      id: 1,
      judge: [],
      judgetxt: "",
      mycomm:[]
    };
  },
  methods: {
    // 回复评论
    huifu() {
      // this.judgetxt;
      this.$message({
          type: "info",
          message: `敬请期待`,
        });
    },
    // 写评论
    judegbtn() {
      if(sessionStorage.getItem('cookie-session')){
        judgemas.style.display = "block";
      }else{
        this.$message({
          type: "error",
          message: `请先登录`,
        });
      }
    },
    // 提交评论
    cloce() {
      judgemas.style.display = "none";
    },
   
  },
  mounted() {
    // 渲染默认评论
    this.id = this.$route.params.id;
    // console.log(this.$route.params.id);
    // console.log(this.id);
    this.$http
      .get("/hotelHomePL", {
        params: {
          id: this.id,
        },
      })
      .then((res) => {
        this.judge = res.data.data;
        // console.log(res.data.data);
      });

      // 渲染自己的评论
    this.$http.get('/gethotelrecomm?mid='+this.$route.params.id).then(resuts=>{
      this.mycomm = resuts.data.data
    })

  },
  components:{
    massagetem
  }
};
</script>

<style lang="scss" scoped>
.judge {
  margin-top: 40px;
  font-size: 14px;
  padding-right: 10px;
  .xiejudge {
    text-align: right;
    margin: 10px;
    
    button {
      padding: 5px 10px;
      background: #409eff;
      color: #fff;
      border: 0;
      border-radius: 3px;
      margin-left:30px;
    }
  }
  .judgeh3 {
    text-align: center;
    color: #409eff;
  }
  .avatar {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin-left: 20px;
  }
  .uname {
    margin-top: 15px;
    color: #409eff;
  }
  .connect {
    padding-bottom: 10px;
  }
  .timer {
    text-align: right;
    padding: 10px 0;
    b {
      color: #409eff;
    }
  }
  /deep/ .el-row {
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
  }
  // 评论内容
  .imgmb {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
    width: 100%;
    height: 1000px;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    padding: 20px;
    i {
      position: absolute;
      top: 20px;
      right: 401px;
      color: rgb(231, 27, 27);
      font-size: 50px;
    }
  }
}
.comm-pic{
  width: auto;
  height: 200px;
}
.my-lv{
  margin-top: 5px;
  color: #f01d1d;
  font-weight: bold;
}
</style>